<template>
  <div class="front">
    <div class="top">
      八寸蛋糕兑换
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
      <van-cell
        v-for="(good, key) in goods"
        :key="key"
        class="cell"
      >
        <single-good :good="good" :region="'3488'"></single-good>
      </van-cell>
    </van-list>
    <p v-if="finished" class="no-more">敬请期待更多产品</p>
    <choose-attr></choose-attr>
  </div>
</template>

<script type="text/ecmascript-6">
  import SingleGood from '../../components/sale/singleGood.vue';
  import ChooseAttr from '../../components/sale/chooseAttr.vue';

  export default {
    components: {
      ChooseAttr,
      SingleGood
    },
    name: 'convertList',

    data() {
      return {
        goods: [],
        loading: false,
        finished: false,
        page: 0,
        convert: this.$route.query.convert
      };
    },
    props: {},
    created() {
    },
    methods: {
      onLoad() {
        this.$store.commit('convert', this.convert);
        let that = this;
        if (this.finished === false) {
          // 异步更新数据
          setTimeout(() => {
            let good = {
              page: this.page,
              size: 8,
              type: 'ticket',
              id: '3488',
              convert: this.convert
            };
            this.$Sale.products(good).then(res => {
              this.page++;
              that.goods = that.goods.concat(res.data);
              if (res.data.length === 0) {
                that.finished = true;
              }
              this.loading = false;
            }, () => {
            });
          }, 500);
        }
      }
    },
    computed: {},
    mounted() {
    },
    watch: {}
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .des
    padding vw(15)
    font-size vw(12)
    line-height 1.5
    color #999
    div
      span
        color main-color
    .top1
      color main-color
      margin-bottom vw(20)
    .top2
      margin-bottom vw(20)

  .top
    display flex
    justify-content space-between
    height vw(30)
    line-height vw(30)
    padding 0 vw(15)
    font-size vw(14)
    color #333

  .no-more
    word-vw(12, third-ash);
    flex-center();
    margin-top 10px
    padding-bottom: 5vw;

  .van-cell
    padding 0
    background-color transparent
</style>
